<template>
  <div class="container">
    <div class="top" @click="back">
      管理 >> <span>下载作品</span>
    </div>
    <div class="main">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane class="body" :label="item.name" :name="i" v-for="(item,i) in list[0]" :key="i">
          <div @click="excel">
            <img src="https://img2.baidu.com/it/u=952765107,4112432712&fm=253&fmt=auto&app=138&f=JPEG?w=715&h=500"
                 alt="">
            作品下载
          </div>
          <div @click="rank">
            <img src="https://chaoke7.oss-cn-shenzhen.aliyuncs.com/setting/1/setting_1552133082.jpg" alt="">
            排名榜单
          </div>
        </el-tab-pane>

      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import {useRouter} from "vue-router";
import {ref, inject, onMounted, reactive} from 'vue'
import * as XLSX from "xlsx";

const axios = inject("$axios")
const list = reactive([[]])
onMounted(() => {
  axios.get("competition").then(res => {
    list[0] = res.data
    console.log(list[0])
  })
})
const activeName = ref(0)

const handleClick = (tab, event) => {
  console.log(tab, event)
}
const router = useRouter()
const back = () => router.push('/manage')
const excel = () => {
  axios.get("sub/list?competitionid=" + list[0][activeName.value].id).then(res => {
    const workbook = XLSX.utils.book_new();
// 创建一个新的工作表
    const worksheet = XLSX.utils.json_to_sheet(res.data);
// 将工作表附加到工作簿，并将工作表命名为students
    XLSX.utils.book_append_sheet(workbook, worksheet, "挑战杯作品列表");
// 导出工作簿，并命名导出文件名为Presidents.xlsx
    var currentTime = new Date();
    XLSX.writeFile(workbook, '挑战杯作品列表' + ".xlsx");
  }).catch(err => {
  })
}
const rank = () => {

  axios.get("sub/rank?competition=" + list[0][activeName.value].id ).then(res => {
// 创建一个新的工作表
      const workbook = XLSX.utils.book_new();
    const worksheet = XLSX.utils.json_to_sheet(res.data[0]);
    console.log(res.data)
// 将工作表附加到工作簿，并将工作表命名为students
    XLSX.utils.book_append_sheet(workbook, worksheet, "信息技术类");
     const worksheet1 = XLSX.utils.json_to_sheet(res.data[1]);
// 将工作表附加到工作簿，并将工作表命名为students
    XLSX.utils.book_append_sheet(workbook, worksheet1, "机械控制类");
      const worksheet2 = XLSX.utils.json_to_sheet(res.data[2]);
// 将工作表附加到工作簿，并将工作表命名为students
    XLSX.utils.book_append_sheet(workbook, worksheet2, "生、化、环、材类");
    // 创建一个新的工作表
    const worksheet3 = XLSX.utils.json_to_sheet(res.data[3]);
// 将工作表附加到工作簿，并将工作表命名为students
    XLSX.utils.book_append_sheet(workbook, worksheet3, "文化科技创意类");

    // 创建一个新的工作表
    const worksheet4 = XLSX.utils.json_to_sheet(res.data[4]);
// 将工作表附加到工作簿，并将工作表命名为students
    XLSX.utils.book_append_sheet(workbook, worksheet4, "人文社科类及调研报告");
      XLSX.writeFile(workbook, '挑战杯作品排名' + ".xlsx");
  }).catch(err => {
  })
}
</script>

<style scoped lang="less">
@media screen and(min-width: 480px) {
  .container {
  width: 90%;
  max-width: 1200px;
  margin: 10px auto;
  padding-bottom: 20px;

  .top {
    font-size: 14px;
    color: #A8ABB2;
    margin: 20px;

    span {
      color: #409EFF;
    }
  }

  .demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }

  .main {
    width: 80%;
    margin: 10px auto;
    background-color: #ffffff;
    padding: 10px;
    border-radius: 10px;
    min-height: 500px;

    .body {
      display: flex;
      flex-direction: row;
      justify-content: center;

      div {
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 50px;
        color: #409EFF;
      }

      img {
        width: 200px;
        height: 200px;
        margin: 10px 30px;
        margin-top: 50px;
      }


    }
  }
}

}
@media screen and(max-width:480px ) {
  .container {
  width: 100vw;
  margin: 10px auto;
  padding-bottom: 20px;

  .top {
    font-size: 14px;
    color: #A8ABB2;
    margin: 20px;
    width: 100%;

    span {
      color: #409EFF;
    }
  }

  .demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }

  .main {
    width: 97%;
    box-sizing: border-box;
    margin: 10px auto;
    background-color: #ffffff;
    padding: 10px;
    border-radius: 10px;
    min-height: 500px;

    .body {
      display: flex;
      flex-direction: column;
      justify-content: center;

      div {
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 50px;
        color: #409EFF;
      }

      img {
        width: 200px;
        height: 200px;
        margin: 10px 30px;
        margin-top: 50px;
      }


    }
  }
}

}
</style>